<template>
  <div>
      <div>
          <span v-for="item in pages" :key="item.id" class="s1" @click="handle(item.id)" :style="item.sty">{{ item.label }}</span>
      </div>
      <div>
          <son/>
      </div>
  </div>
</template>

<script setup>
/*
作业要求：
1、 将上面的分类栏与下面的列表栏 分成两个组件
2、 点击分类栏中的标签，在列表栏中显示相应的数据
3、 分类栏中选中的标签已高绿背景显示
4、使用 axios 完成后端接口数据的获取
*/
import son from './son.vue';
import { ref } from 'vue';
import { nanoid } from 'nanoid';

const pages = ref([
    {
      id: nanoid(6),
      label: '全部',
      sty: {
        backgroundColor: 'rgb(157, 189, 131)',
        color:'aliceblue'
      }
    },
    {
      id: nanoid(6),
      label: '精华',
      sty: {
        backgroundColor: '',
        color:''
      }                                                               
    },
    {
      id: nanoid(6),
      label: '分享',
      sty: {
        backgroundColor: '',
        color:''
      }
    },
    {
      id: nanoid(6),
      label: '问答',
      sty: {
        backgroundColor: '',
        color:''
      }
    },
    {
      id: nanoid(6),
      label: '招聘',
      sty: {
        backgroundColor: '',
        color:''
      }
    },
    {
      id: nanoid(6),
      label: '客户端测试',
      sty: {
        backgroundColor: '',
        color:''
      }
    },

  ]);

const handle = _id => {
  pages.value.forEach((item) => {
      if(_id == item.id){
          item.sty = {backgroundColor: 'rgb(157, 189, 131)',color:'aliceblue'}
      }else item.sty = {backgroundColor: '',color:''}
  })
}


</script>

<style scoped>
.s1 {
  display: inline-block;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: rgb(157, 189, 131);
}

.s1:hover {
  cursor:pointer;
  color: rgb(50, 109, 2);
}

</style>